<template>
	<view class="i-shopCar" :style="{height: height, background: bgColor}" @touchmove.stop.prevent="()=> {}">
		<view class="back_body" @click="showMask"></view>
		<view class="inventory" :style="{height: inventoryHeight}">
			<view class="inventory_body">
				<view class="inventory_title" v-if="mask">
					<text @click="store.clearShopForm()">清空</text>
					<text class="ti">清单</text>
					<view class="iamge" @click="showMask">
						<image src="../../static/images/close_gray_icon.png" mode=""></image>
					</view>
				</view>
				<scroll-view class="inventory_list" :scroll-y="mask ? true : false" :style="{overflowY: mask ? 'scroll' : 'hidden'}">
					<view class="inventory_item" v-for="item in shopForm.shopList" :key="item.serviceId">
						<view class="item_left">
							<text class="serviceName">{{item.serviceName}}</text>
							<view class="oilI" v-if="item.skuName">
								<text>{{item.skuName}}</text>
								<text>{{item.volume}}L</text>
							</view>
							<view class="prices">
								<i-price>{{item.dataDiscountPrice }}</i-price>
								<text>￥{{item.dataPrice}}</text>
							</view>
						</view>
						<view class="item_R">
							<i-stepNum :value="item.dataNum" @change="(e) => change(e, item)"></i-stepNum>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="shopCar" @click="showMask">
			<view class="car_left">
				<view class="car_img">
					<image src='../../static/images/shop_car_icon.png' mode=""></image>
					<view class="num" v-if="shopForm.shopNum">{{shopForm.shopNum}}</view>
				</view>
				<i-price>{{shopForm.allDiscountPrice}}</i-price>
			</view>
			<i-buttons :disabled="disabled" padding="18rpx 76rpx" color="#fff" bgColor="#FB652E" radius="4rpx"
				size="32rpx" @click="toShop" style="margin-right: 32rpx;">立即购买</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, ref, defineEmits } from 'vue';
	import useStore from '../../stores/index'
	import { navTo } from '../../utils/common';


	const disabled = ref(true)
	const store = useStore()

	const height = ref('152rpx')
	const inventoryHeight = ref('0')
	const bgColor = ref('#ffffff')
	const mask = ref(false)

	const emit = defineEmits(['submit'])
	const shopForm = computed(() => {
		disabled.value = !store.shopForm.shopNum
		return store.shopForm
	})

	const userInfo = computed(() => {
		return store.userInfo
	})

	const toShop = () => {
		emit('submit')
		mask.value = false
		height.value = '152rpx'
		bgColor.value = '#ffffff'
		inventoryHeight.value = '0rpx'

	}
	const change = (type : string, item : any) => {
		if (type === 'add') {
			store.addShopForm(item);
		} else {
			store.removeShopForm(item);
		}
	}

	const showMask = () => {
		mask.value = !mask.value
		if (mask.value) {
			height.value = '100vh'
			inventoryHeight.value = '600rpx'
			bgColor.value = 'rgba(0,0,0,0.4)'
		} else {
			height.value = '152rpx'
			bgColor.value = '#ffffff'
			inventoryHeight.value = '0rpx'
		}

	}
</script>

<style lang="scss" scoped>
	.i-shopCar {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 99;
		@include flexC;
		justify-content: flex-end;

		.inventory {
			width: 100%;
			background-color: #fff;
			transition: all 0.3s ease-out;

			.inventory_body {
				background-color: #fff;
				padding: 40rpx 32rpx;

				.inventory_title {
					margin-bottom: 40rpx;
					width: 100%;
					@include flexRS;

					text {
						@include dfont(26rpx);
						color: #a0a0a0;
					}

					.ti {
						@include titlefont;
					}

					.iamge {
						width: 48rpx;
						height: 48rpx;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}
				}

				.inventory_list {
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					width: 100%;
					height: 500rpx;

					.inventory_item {
						@include flexRS;
						padding: 40rpx 0;
						border-bottom: 1rpx solid #f3f4f5;

						.item_left {
							@include flexC;
							width: 60%;
							.serviceName {
								@include overflow;
								max-width: 90%;
							}

							text {
								@include titlefont(28rpx);
								margin-bottom: 8rpx;
							}

							.prices {
								@include flexR;

								text {
									text-decoration-line: line-through;
									margin-left: 8rpx;
									margin-top: 8rpx;
									@include dprice(26rpx);
									color: #A0A0AD;
								}
							}
						}

						.oilI {
							text {
								@include dfont(26rpx);
								color: #A0A0AD;
								margin-right: 18rpx;
							}

							margin-bottom: 8rpx;
						}
					}
				}

			}
		}

		.shopCar {
			width: 100%;
			padding: 20rpx 0 40rpx 0;
			@include flexRS;
			background-color: #fff;
			z-index: 9;

			.car_left {
				@include flexRS;
				margin-left: 32rpx;

				.car_img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 80rpx;
					margin-right: 18rpx;
					position: relative;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 80rpx;

					}

					.num {
						top: -10rpx;
						right: -10rpx;
						width: 40rpx;
						height: 40rpx;
						@include flexRC;
						@include dfont(24rpx);
						position: absolute;
						border-radius: 50%;
						background-color: $dcolor;
						color: #fff;
						z-index: 999;
					}
				}
			}
		}

		.back_body {
			width: 100%;
			background-color: rgba(0, 0, 0, 0);
			height: 100%;
		}
	}
</style>